<template>
  <div class="app-container">
    <div class="container-bg">
      <el-row :gutter="15">
        <el-form
          ref="elForm"
          id="elForm"
          :model="formData"
          size="medium"
          label-width="110px"
          style="max-width: 1200px"
        >
        <div v-for="(item,i) in formData.data" :key="i">
          <el-col :span="12" v-if="item.type == 'inputBox'">
            <el-form-item
              :label="item.name"
              :prop="'data.' + i  + '.value'"
              :rules="[
                { required: !item.ro, message: '请输入', trigger: 'blur' },
                { max: 64, message: '长度不能超过64位' },
              ]"
            >
              <el-input
                v-model="item.value"
                placeholder="请输入"
                :style="{ width: '100%' }"
                v-isNormal
                :disabled="item.ro"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="item.type == 'selectBox'">
          <!-- <el-col :span="12" v-if="false"> -->
            <el-form-item :label="item.name">
                <el-select
                  :disabled="!item.ro"
                  v-model="item.value"
                  placeholder="请选择"
                  :multiple="Array.isArray(item.value)"
                  v-isNormal
                  style="width:100%;"
                >
                  <el-option v-for="(v,i) in item.option" :key="i" :label="v.name" :value="v.value" :disabled="v.isDisabled"></el-option>
                </el-select>
              </el-form-item>
          </el-col>
        </div>
        <!-- <el-col :span="12">
            <el-form-item label="设备系列" prop="deviceType">
              <el-input
                v-model="info.deviceType"
                placeholder="请输入设备系列"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备号SN" prop="serialNumber">
              <el-input
                v-model="info.serialNumber"
                placeholder="请输入设备号SN"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编号" prop="telecontrolID">
              <el-input
                v-model="info.telecontrolID"
                placeholder="请输入设备编号"
                :style="{ width: '100%' }"
                :disabled="true"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="软件版本号" prop="softwareVersion">
              <el-input
                v-model="info.softwareVersion"
                placeholder="请输入软件版本号"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="硬件版本号" prop="hardwareVersion">
              <el-input
                v-model="info.hardwareVersion"
                placeholder="请输入硬件版本号"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="内核版本号" prop="kernelVersion">
              <el-input
                v-model="info.kernelVersion"
                placeholder="请输入内核版本号"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="算法版本号" prop="algorithmVersion">
              <el-input
                v-model="info.algorithmVersion"
                placeholder="请输入算法版本号"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="web版本号" prop="webVersion">
              <el-input
                v-model="info.webVersion"
                placeholder="请输入web版本号"
                :disabled="true"
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备语言" prop="language">
              <el-select
                v-model="info.language"
                placeholder="请选择语言"
                v-isNormal
              >
                <el-option label="简体中文" value="Chinese"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="24" v-if="isAdmin">
            <el-form-item size="large">
              <el-button
                type="primary"
                size="medium"
                style="width: 120px"
                @click="submitForm('elForm')"
                v-isNormal
                >保存
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div v-if="false">
        <span style="color: #f00">*</span>
        <span style="color: #0000ff">
          &nbsp;修改完设备语言,请关闭浏览器重新登录.
        </span>
      </div>
    </div>

    <change-password
      ref="changePaswordRef"
      @changePW="changePW"
    ></change-password>
  </div>
</template>

<script>
  import Cookies from 'js-cookie'
import { Base64 } from "js-base64";
import {
  getSystemDeviceInfoApi,
  editSystemDeviceInfoApi,
  getSystemUserListApi,
  editSystemUserApi,
} from "@/api/access/equipment";
import changePassword from "./components/changePassword.vue";
export default {
  components: {
    changePassword,
  },
  props: {},
  data() {
    return {
      isAdmin:false,
      info: {},
      data: [],
      formData:{
        data:[]
      }
    };
  },
  created() {
    console.log('this.isAdmin',Cookies.get('Face-Token'));
    this.isAdmin=Cookies.get('roleId')*1>1?false:true
  },
  mounted() {
    if (this.$route.query.iNeedChangePassword == "1") {
      this.init();
    }

    console.log('角色',this.$store.state);
    // this.init();

    this.getBaseInfo();
  },
  methods: {
    init() {
      this.$refs.changePaswordRef.open();
      getSystemUserListApi().then((res) => {
        console.log(res);
      });
    },
    // 修改密码
    changePW(params) {
      // console.log(params);
      // console.log(this.$route.query);
      let paramsObj = {
        iUserLevel: Number(this.$route.query.iUserLevel),
        newPassword: Base64.encode(params.newPassword),
        newUserName: this.$route.query.sUserName,
        sUserName: this.$route.query.sUserName,
        sPassword: Base64.encode(params.sPassword),
        secondNewPw: Base64.encode(params.secondNewPw),
        id: Number(this.$route.query.id),
      };
      editSystemUserApi(paramsObj).then((res) => {
        // console.log(res);
        this.$message.success("修改密码成功");
        this.$refs.changePaswordRef.cancel();
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          editSystemDeviceInfoApi(this.formData).then((res) => {
            console.log(res);
            this.$message.success("保存成功");
          });
        } else {
          return false;
        }
      });
    },
    getBaseInfo() {
      getSystemDeviceInfoApi().then((res) => {
        this.formData.data = res || [];
        // $('#elForm .el-form-item__label:before').css('content', '*');
        // if (this.data) {
        //   for (let v of this.data) {
        //     Object.keys(v).forEach((item) => {
        //       if (item == "name") {
        //         // console.log(v['name'],v['value']);
        //         this.$set(this.info, v["name"], v["value"]);
        //       }
        //     });
        //   }
        // } else {
        // }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// /deep/ #elForm .el-form-item__label:first-child:before {
//   content: '*';
// }
// /deep/ #elForm .el-form-item__label:before {
//   content: '';
// }
</style>
